<template>
    <div class="label">
<div class="label_title">
    <yk-title :level="4" style="margin: 0;">文章标签</yk-title>
        <yk-space>
            <yk-popconfirm title="新建标签" @cancel="cancel" placement="bottom" @confirm="confirm" trigger="click">
                <yk-text type="primary" style="line-height:32px;">
                    <IconCirclePlusOutline />新建
                </yk-text>
                <template #content>
                    <div style="margin:8px 4px 16px 0">
                        <yk-input show-counter :limit="10" placeholder="请输入标签名称" stype="width:208px"
                            v-model="inputValue" />
                    </div>
                </template>
            </yk-popconfirm>
            <yk-text type="primary" @click="showModal" style="line-height:32px;">
                <IconSettingsOutline />管理标签
            </yk-text>
        </yk-space>
        <yk-modal v-model="visible" title="管理分组">
            <span>
                <labelManage :label="label" @deleteLabel="rawLabel" style="max-height: 500px;"/>
            </span>
            <template #footer>
                <yk-button @click="showModal">确定</yk-button>
            </template>
        </yk-modal>
    </div>
        <yk-space wrap size="xl">
            <yk-tag  v-for="item in label" :key="item.id"
            size="l"
                :class="{ 'label_menu-selected': selected == `${item.id}label` }"
                @click="changeSelected(item.id, 'label')">
                {{ item.label_name }}
            </yk-tag>
        </yk-space>
    </div>
    
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
// import { mklabel } from '../../mock/data';
import labelManage from './label-manage.vue';
import { useLabel } from '../../hooks/labelHook';

const { inputValue,label,confirm, cancel,rawLabel } = useLabel(); //管理标签选择

//管理分组
const visible = ref<boolean>(false)
const showModal = () => {
    visible.value = !visible.value
}

// 当前选择
type SelectionValue = 'all' | `${number}exclude` | `${number}state` | `${number}label`;
const selected = ref<SelectionValue>('all');

// 选择切换
const changeSelected = (id: number | null, type: 'all' | 'exclude' | 'state' | 'label'): void => {
    if (id === null) {
        selected.value = 'all';
        return;
    }
    const newSelected: SelectionValue = `${id}${type}` as SelectionValue;
    if (newSelected !== selected.value) {
        selected.value = newSelected;
    }
};

onMounted(() => {
    rawLabel();
})

</script>

<style scoped lang="less">
.label {
    padding: @space-l @space-xl;
    border-radius: @radius-m;
    background-color: @bg-color-l;
    width: 100%;
&_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: @space-l;
    }
}
</style>